<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <h3 class="modal-title">{{'CHANGE_PWD.TITLE' | translate}}</h3>
    <div class="modal-body body-format">
        <inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert>
        <form #changepwdForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label for="oldPassword" class="clr-control-label required">{{'CHANGE_PWD.CURRENT_PWD' | translate}}</label>
                <div class="clr-control-container" [class.clr-error] ="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
                    <div class="clr-input-wrapper">
                        <input class="clr-input pwd-input" [type]="showOldPwd?'text':'password'" id="oldPassword" required name="oldPassword" [(ngModel)]="oldPwd" #oldPassInput="ngModel"
                               size="40">
                        <clr-icon *ngIf="!showOldPwd" shape="eye" class="pw-eye" (click)="showOldPwd =!showOldPwd"></clr-icon>
                        <clr-icon *ngIf="showOldPwd" shape="eye-hide" class="pw-eye" (click)="showOldPwd =!showOldPwd"></clr-icon>
                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
                        <span id="oldPassword-error">{{'TOOLTIP.CURRENT_PWD' | translate}}</span>
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label for="newPassword" class="clr-control-label required">{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
                <div class="clr-control-container" [class.clr-error] ="!getValidationState('newPassword')">
                    <div class="clr-input-wrapper">
                        <input class="clr-input pwd-input" [type]="showNewPwd?'text':'password'" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword"
                               [(ngModel)]="newPwd" #newPassInput="ngModel" size="40" (input)='handleValidation("newPassword", false)' (blur)='handleValidation("newPassword", true)'>
                        <clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
                        <clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="!getValidationState('newPassword')">
                        <span id="newPassword-error">{{'TOOLTIP.PASSWORD' | translate}}</span>
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label for="reNewPassword" class="clr-control-label required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
                <div class="clr-control-container" [class.clr-error] ="!getValidationState('reNewPassword')">
                    <div class="clr-input-wrapper">
                        <input class="clr-input pwd-input" [type]="showReNewPwd?'text':'password'" id="reNewPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="reNewPassword"
                               [(ngModel)]="reNewPwd" #reNewPassInput="ngModel" size="40" (input)='handleValidation("reNewPassword", false)'
                               (blur)='handleValidation("reNewPassword", true)'>
                        <clr-icon *ngIf="!showReNewPwd" shape="eye" class="pw-eye" (click)="showReNewPwd =!showReNewPwd"></clr-icon>
                        <clr-icon *ngIf="showReNewPwd" shape="eye-hide" class="pw-eye" (click)="showReNewPwd =!showReNewPwd"></clr-icon>
                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="!getValidationState('reNewPassword')">
                        <span id="reNewPassword-error">{{'TOOLTIP.CONFIRM_PWD' | translate}}</span>
                    </clr-control-error>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <span class="spinner spinner-inline loading-top" [hidden]="showProgress === false"></span>
        <button type="button" class="btn btn-outline" id="cancel-btn" (click)="close()">{{'BUTTON.CANCEL' | translate}}</button>
        <button type="button" class="btn btn-primary" id="ok-btn" [disabled]="!isValid || showProgress" (click)="doOk()">{{'BUTTON.OK' | translate}}</button>
    </div>
</clr-modal>
